<template>
	<div class="teaching-graph-page">
		<div class="page-tabs-wrapper">
			<span class="tab-item" :class="{ active: activeTab === 'tree' }" @click="activeTab = 'tree'">
				树图
			</span>
			<span
				class="tab-item"
				:class="{ active: activeTab === 'network' }"
				@click="activeTab = 'network'"
			>
				网图
			</span>
		</div>
		<div class="graph-search-wrapper">
			<el-input
				class="self-radius"
				v-model="searchNodeValue"
				placeholder="输入图谱节点名称搜索"
				:suffix-icon="Search"
				clearable
				@change="onSearchNodeHandle"
			/>
		</div>

		<el-tooltip
			ref="tooltipRef"
			:content="isOpenLeftMenu ? '收起课堂列表' : '展开课堂列表'"
			effect="customized"
			:show-after="0"
			:hide-after="200"
		>
			<div
				class="page-left-menu-btn"
				:class="{ active: isOpenLeftMenu }"
				@click="clickPageLeftMenuBtnHandle"
			>
				<el-icon>
					<DArrowRight v-if="!isOpenLeftMenu" />
					<DArrowLeft v-if="isOpenLeftMenu" />
				</el-icon>
			</div>
		</el-tooltip>
		<div v-show="isOpenLeftMenu" class="page-left-menu-wrapper">
			<div class="menu-title">课堂列表</div>
			<div class="filter-wrapper">
				<div class="search-value-wrapper">
					<el-input
						class="self-radius"
						v-model="searchValue"
						placeholder="输入课堂名称搜索"
						:suffix-icon="Search"
						@change="onSearchHandle"
					/>
				</div>
			</div>
			<div class="filter-statistics-wrapper">
				<span>课堂</span>
				<span>（{{ courseList.length || 0 }}）</span>
			</div>
			<div class="filter-result-wrapper">
				<div class="list-wrapper">
					<div
						class="list-item-wrapper"
						v-for="(item, index) in courseList"
						:key="item.code"
						@mouseenter="
							handleCourseHover($event, {
								name: item.name,
								teacherNames: item.teacherNames,
								teachingClassName: item.teachingClassName,
								termName: item.termName,
								academyName: item.academyName
							})
						"
						@mouseleave="handleCourseLeave"
					>
						<div class="title-wrapper">
							<span class="title-index">{{
								(index + 1)
									.toString()
									.padStart(Math.max(courseList.length.toString().length, 3), '0')
							}}</span>
							<span class="title-text">{{ item.name || '未知课堂' }}</span>
						</div>
						<div v-if="item.planBeginTime" class="other-wrapper">
							<span class="date">{{ formatTime(item.planBeginTime, 'YYYY-MM-DD HH:mm') }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 详细信息弹框 - 在左侧菜单容器外部 -->
		<div v-show="lessonDetail.visible" class="course-detail-popover" :style="lessonDetail.style">
			<div class="detail-item">
				<span class="detail-title">{{ lessonDetail.data.name || '未知课堂' }}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">教师名称：</span>
				<span class="detail-value">{{ lessonDetail.data.teacherNames || '-' }}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">教学班级：</span>
				<span class="detail-value">{{ lessonDetail.data.teachingClassName || '-' }}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">授课学期：</span>
				<span class="detail-value">{{ lessonDetail.data.termName || '-' }}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">开课学院：</span>
				<span class="detail-value">{{ lessonDetail.data.academyName || '-' }}</span>
			</div>
		</div>
		<div class="page-graph-wrapper"></div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { Search, DArrowRight, DArrowLeft } from '@element-plus/icons-vue';
import { getErrorMessage, TooltipInstanceType, getCourseListAPI } from '@/api/index';
import { formatTime } from '@/assets/js/utils';
import type {
	MenuLessonDetailsElType,
	MenuLessonDetailsType,
	CourseListItemType
} from './TeachingGraph.type';

const route = useRoute();
onMounted(() => {
	if (route.query.courseCode) {
		getCourseList();
	}
});

// 获取课堂列表
const courseList = ref<CourseListItemType[]>([]);
const getCourseList = async () => {
	try {
		const data = await getCourseListAPI({
			courseCodes: route.query.courseCode as string,
			searchValue: searchValue.value
		});

		courseList.value = data.list || [];
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};

const searchValue = ref<string>('');
const onSearchHandle = () => {
	getCourseList();
};

// 左侧菜单
const isOpenLeftMenu = ref<boolean>(false);
const tooltipRef = ref<TooltipInstanceType>();
const clickPageLeftMenuBtnHandle = () => {
	isOpenLeftMenu.value = !isOpenLeftMenu.value;
	tooltipRef.value?.hide();
};

// 左侧菜单课堂详情弹框
const lessonDetail = ref<MenuLessonDetailsElType>({
	visible: false,
	style: {},
	data: {
		name: '',
		teacherNames: '',
		teachingClassName: '',
		termName: '',
		academyName: ''
	}
});
const handleCourseHover = (event: MouseEvent, data: MenuLessonDetailsType) => {
	const target = event.currentTarget as HTMLElement;
	const rect = target.getBoundingClientRect();

	lessonDetail.value.visible = true;
	lessonDetail.value.data = data;
	lessonDetail.value.style = {
		position: 'fixed',
		left: `${rect.right + 30}px`,
		top: `${rect.top}px`,
		transform: 'translateY(0)'
	};
};
const handleCourseLeave = () => {
	lessonDetail.value.visible = false;
};

// 图谱类型
const activeTab = ref<string>('network');
// 搜索图谱节点
const searchNodeValue = ref('');
const onSearchNodeHandle = () => {
	if (activeTab.value === 'tree' && searchNodeValue.value) {
		console.log(111);
	}
	if (activeTab.value === 'network' && searchNodeValue.value) {
		console.log(222);
	}
};
</script>
<style scoped lang="scss">
.teaching-graph-page {
	position: relative;
	height: 100%;
	padding: 2rem;
}

.graph-search-wrapper {
	position: absolute;
	right: 2rem;
	top: 2rem;
}

.page-left-menu-btn {
	position: absolute;
	left: 0;
	top: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	font-size: $font-size-large-4;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
	background-color: #ffffff;
	box-shadow: 0px 2px 4px 0px rgba(31, 15, 93, 0.2);
	cursor: pointer;

	&.active {
		left: 32rem;
	}

	&:hover {
		background-color: color.adjust($color-brand, $lightness: 12%);
		color: #fff;
	}
}

.page-left-menu-wrapper {
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 2rem;
	top: 2rem;
	bottom: 2rem;
	width: 30rem;
	padding: 2rem;
	background-color: #fdfcff;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 0px 0px 8px 0px rgba(26, 60, 207, 0.18);
	z-index: 10;

	.menu-title {
		margin-bottom: 1rem;
		font-size: $font-size-large-1;
		color: color.adjust($color_brand, $lightness: -50%);
	}

	.filter-wrapper {
		display: flex;
		margin-bottom: 1rem;

		.search-value-wrapper {
			flex: 1;
			min-width: 0;
		}
	}

	.filter-statistics-wrapper {
		display: flex;
		align-items: flex-start;
		color: $text-color-secondary;
		margin-bottom: 1rem;
	}

	.filter-result-wrapper {
		flex: 1;
		min-height: 0;
		overflow: auto;

		.list-wrapper {
			.list-item-wrapper {
				position: relative;
				margin-bottom: 1rem;
				padding: 1rem;
				border-radius: 4px;
				border-bottom: 1px solid $border-color-primary;
				cursor: pointer;
				transition: all 0.3s ease;

				&:hover {
					background-color: $bg-block-color-brand;
					border-bottom-color: transparent;
				}

				&:last-child {
					margin-bottom: 0;
				}

				&:active {
					background-color: $bg-block-color-brand;
					border-bottom-color: transparent;
				}

				.title-wrapper {
					display: flex;
					align-items: baseline;
				}

				.title-index {
					display: block;
					width: 3.5rem;
					font-size: $font-size-small-2;
					color: $text-color-secondary;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.title-text {
					font-size: $font-size-base;
					color: $text-color-regular;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.other-wrapper {
					display: flex;
					align-items: baseline;
					padding-left: 3.5rem;
					padding-top: 0.5rem;
					font-size: $font-size-small-1;
					color: $text-color-secondary;
				}

				.date {
					font-size: $font-size-small-1;
					color: $text-color-secondary;
					padding-right: 1rem;
				}
			}
		}
	}
}

// 课程详情弹框（位于左侧菜单外部）
.course-detail-popover {
	min-width: 28rem;
	max-width: 35rem;
	background: #ffffff;
	box-shadow: 0px 0px 8px 0px rgba(26, 60, 207, 0.18);
	border-radius: 4px;
	padding: 1.5rem;
	z-index: 1000;

	&::before {
		content: '';
		position: absolute;
		left: -1rem;
		top: 4rem;
		width: 0;
		height: 0;
		border-left: 0.5rem solid transparent;
		border-right: 0.5rem solid #ffffff;
		border-bottom: 0.5rem solid transparent;
		border-top: 0.5rem solid transparent;
	}

	.detail-item {
		display: flex;
		align-items: baseline;
		margin-bottom: 1rem;
		line-height: 1.6;

		&:last-child {
			margin-bottom: 0;
		}
		.detail-title {
			font-size: $font-size-base;
			color: $text-color-primary;
		}

		.detail-label {
			flex-shrink: 0;
			min-width: 7rem;
			font-size: $font-size-small-1;
			color: $text-color-secondary;
			font-weight: 500;
		}

		.detail-value {
			flex: 1;
			font-size: $font-size-small-1;
			color: $text-color-regular;
			word-break: break-all;
		}
	}
}

.page-graph-wrapper {
	height: calc(100% - 5rem);
}
</style>
